<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<!-- jsp文件头和头部 -->
		<%@ include file="top.jsp"%>
		
		<link rel="stylesheet" type="text/css" href="resources/css/index.css">
		
		<style type="text/css">
			.displayblock {
				display: inline-block;
				zoom: 1;
				*display: inline;
				vertical-align: middle;
			}
			
			.index_top {
				padding: 10px;
				font-family: '微软雅黑';
				font-size: 14px;
				position: relative;
				height: 64px;
			}
			
			.index_top_left{
				width: 64%;
			}
			
			.index_top_right{
				width: 35%;
				text-align: right;
			}
			
			.index_top_right .rspan{
				margin: 0 10px;
			}
			
			.index_title{
				font-size: 40px;
				padding: 0 10px;
			}
			.index_top_icon{
				padding-left: 20px;
				background-position: left center;
			}
			.index_foot{
				padding: 5px;
				text-align: center;
				font-family: '微软雅黑';
				font-size: 14px;
				overflow: hidden;
			}
			
		</style>
		
		<script type="text/javascript">
		    $(function(){
		    	$(window).trigger('resize');
		    	
		    	//计算主页显示的时间
		    	setInterval("show_time.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);
		    });
		    
		    function addTab(title, href, icon) {
		        var $tabs = $('#tabs');
		        icon = icon || 'menu_icon_datadeal';
		        if ($tabs.tabs('exists', title)) {
		        	$tabs.tabs('select', title);
		        } else {
		            if (href) {
		                var content = '<iframe frameborder="0" src="' + handleHref(href) + '" style="border:0;width:100%;height:99.5%;"></iframe>';
		            } else {
		                var content = '';
		            }
		            $tabs.tabs('add', {
		                title : title,
		                content : content,
		                closable : true,
		                iconCls: icon
		            });
		        }
		    }
		    
		    function handleHref(href){
		    	if(href.indexOf("/") == 0){
		    		href = href.substring(1);
		    	}
		    	return href;
		    }
		    
		    function showModifyPwd(){
		    	$('#modifyPwdDlg').dialog('open');
				$('#modifyPwdForm').form('reset');
		    }
		    
		    function doModifyPwd(){
				$('#modifyPwdForm').form('submit',{
					onSubmit: function(){
						return $(this).form('validate');
					},
					success: function(result){
						var result = eval('('+result+')');
						if (result.errorMsg){
							$.messager.alert('Error',result.errorMsg);
						} else {
							$('#modifyPwdDlg').dialog('close');
							$.messager.show({
								title:'提示',
								msg:'密码修改成功'
							});
						}
					}
				});
			}
	    </script>
	</head>
	
	<body class="easyui-layout">
		<%-- 头部 --%>
	    <div data-options="region:'north',split:false,border:false" class="index_top tree-node-hover">
	    
		    <div class="displayblock index_top_left">
	    		<div class="index_title displayblock">Sure后台管理系统</div>
	    		<div class="displayblock"><span class="icon-time index_top_icon" id="show_time" ></span></div>
	    	</div>
	    	<div class="displayblock index_top_right">
	    		<span class="rspan icon-03 index_top_icon">您好，${userName }</span>
	    		<span class="rspan"><a href="#" onclick="showModifyPwd()">修改密码</a></span>
	    		<span class="rspan icon-arrow_right index_top_icon"><a href='logout'>注销</a></span>
	    	</div>
	    </div>
	    
	    <%--左侧菜单栏 --%>
	    <div data-options="region:'west',split:true" style="width:200px;">
	    	<div id="menu" class="easyui-accordion i_accordion_menu" style="border:0;width:100%;height:100%;">
	    		
				<c:forEach items="${authTree.children }" var="menu">
	    			<div title="${menu.authName }" style="overflow: auto;">
						<c:forEach items="${menu.children }" var="page">
							<div class="nav-item">
								<a href="javascript:addTab('${page.authName }','${page.authEntry }','menu_icon_datadeal')">
									<span class="menu_icon_datadeal"></span>
									<span>${page.authName }</span>
								</a>
							</div>
						</c:forEach>
					</div>
				</c:forEach>
	    		
	    	</div>
	    </div>
	    
	    <%--主页面区 --%>
	    <div data-options="region:'center'" style="overflow: hidden;">
	    	<div id="tabs" class="easyui-tabs" style="overflow: hidden;" data-options="border:false,fit:true">
                <div title="首页" data-options="border:false" style="overflow: hidden;">
                </div>
            </div>
	    </div>
	    
	    <%-- 底部 --%>
	    <div data-options="region:'south',split:false" class="index_foot tree-node-hover">
    		&copy;xxx版权所有
    	</div>
    	
    	<%-- 修改密码 --%>
		<div id="modifyPwdDlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
			closed="true" buttons="#modifyPwdDlgBtns" title="修改密码" modal="true" resizable="true">
			<div class="ftitle">修改密码</div>
			<form id="modifyPwdForm" method="post" data-options="url:'<%=basePath%>/modifyPwd'">
				<div class="fitem">
					<label>原密码:</label>
					<input type="password" id="oldPassword" name="oldPassword" class="easyui-validatebox" required="required">
				</div>
				<div class="fitem">
					<label>新密码:</label>
					<input type="password" id="password" name="password" class="easyui-validatebox" required="required">
				</div>
				<div class="fitem">
					<label>确认密码:</label>
					<input type="password" class="easyui-validatebox" required="required" validType="equals['#password','两次密码输入不一致']" placeholder="请再次输入新密码">
				</div>
			</form>
		</div>
		<div id="modifyPwdDlgBtns">
			<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="doModifyPwd()">保存</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#modifyPwdDlg').dialog('close')">取消</a>
		</div>
	</body>
</html>